<template>
  <div class="chart">
    <el-row :gutter="20">
      <el-col :span="12">
        <h1>能耗同比分析（千瓦时）</h1>
        <div id="graded" class="echart"></div
      ></el-col>
      <el-col :span="12">
        <h1>金额同比分析（元）</h1>
        <div id="money" class="echart"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { BarChart, LineChart } from "echarts/charts";
echarts.use([BarChart, LineChart]);
export default {
  name: "analysisChart",
  props: {
    // 折线图数据
    data: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.BarChart(this.data);
    }, 500);
  },
  beforeDestroy() {
    this.chartDes();
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.BarChart(this.data);
          }, 200);
        }
      },
      deep: false, // 此处设为true也会监测到数据变化，但是过于粗暴且没有过渡效果，推荐setTimeout
      immediate: false,
    },
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    BarChart(barData) {
      let option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["本期能耗", "同期能耗", "同比", "累计同比"],
        },
        grid: {
          left: "0%",
          right: "5%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: barData.xData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "num",
            min: barData.minnum,
            max: barData.maxnum == 0 ? 100 : barData.maxnum,
            interval:
              barData.maxnum == 0
                ? 50
                : ((barData.maxnum - barData.minnum) / 2).toFixed(2),
            axisLabel: {
              formatter: "{value} kwh",
            },
          },
          {
            type: "value",
            name: "percentage",
            min: barData.mimnumRate,
            max: barData.maxnumRate == 0 ? 25 : barData.maxnumRate,
            interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "本期能耗",
            type: "bar",
            color: "#5B9BD5",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kwh";
              },
            },
            data: barData.thisnumData,
          },
          {
            name: "同期能耗",
            type: "bar",
            color: "#ED7D31",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kwh";
              },
            },
            data: barData.lastnumData,
          },
          {
            name: "同比",
            type: "line",
            yAxisIndex: 1,
            color: "yellow",
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: barData.rationumData,
          },
          // {
          //   name: "累计同比",
          //   type: "line",
          //   yAxisIndex: 1,
          //   color: "red",
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + " %";
          //     },
          //   },
          //   data: [4.0, 4.2, 5.3, 6.5, 7.7, 12.2, 18.4, 22.4, 14.3, 8.7],
          // },
        ],
      };
      let option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["本期金额", "同期金额", "同比", "累计同比"],
        },
        grid: {
          left: "0%",
          right: "5%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: barData.xData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "money",
            min: barData.minmoney,
            max: barData.maxmoney == 0 ? 200 : barData.maxmoney,
            interval:
              barData.maxmoney == 0
                ? 100
                : ((barData.maxmoney - barData.minmoney) / 2).toFixed(2),
            axisLabel: {
              formatter: "{value} 元",
            },
          },
          {
            type: "value",
            name: "percentage",
            min: barData.mimmoneyRate,
            max: barData.maxmoneyRate == 0 ? 25 : barData.maxmoneyRate,
            interval: 5,
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "本期金额",
            type: "bar",
            color: "#7F6000",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 元";
              },
            },
            data: barData.thismoneyData,
          },
          {
            name: "同期金额",
            type: "bar",
            color: "#0070C0",
            tooltip: {
              valueFormatter: function (value) {
                return value + " 元";
              },
            },
            data: barData.lastmoneyData,
          },
          {
            name: "同比",
            type: "line",
            yAxisIndex: 1,
            color: "",
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: barData.ratiomoneyData,
          },
          // {
          //   name: "累计同比",
          //   type: "line",
          //   yAxisIndex: 1,
          //   color: "",
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + " %";
          //     },
          //   },
          //   data: [4.0, 4.2, 6.3, 7.5, 7.7, 12.2, 16.4, 18.4, 20.9, 14.4, 15.1],
          // },
        ],
      };
      this.initChart("graded", option1);
      this.initChart("money", option2);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
h1 {
  text-align: center;
  font-weight: bold;
}
.chart {
  .echart {
    width: 100%;
    height: 420px;
  }
}
</style>
